<template>
    <div class="post_mood">
        <image mode="widthFix" class="default" :src="imgUrl" @tap="upload"/>
        <div class="cityName">
            <div class="city">
                <image class="icon" src="../../static/images/position.png"/>
                <span class="address">{{address}}</span>
            </div>
            <span class="name">{{name}}</span>
        </div>
        <textarea v-if="getSrcFlag" maxlength="180" class="desc" placeholder="宝贝，说点什么呗" name="textarea" placeholder-style="color:#ccc;" v-model="desc"/>
        <div class="save" @tap="save">
            <image class="save-t" src="../../static/images/save.png"/>
            <span class="save-b">保存</span>
        </div>
        <div class="loading-container" v-if="!getSrcFlag">
            <loading></loading>
        </div>
    </div>
</template>

<script>
import Loading from 'components/loading'
import tools from 'common/js/tools'
export default {
  name: 'PostMood',
  data () {
    return {
      imgUrl: '../../static/images/default.png',
      address: '',
      openId: '',
      name: '黄彬',
      getSrcFlag: true,
      desc: '',
      weather: ''
    }
  },
  components: {
    Loading
  },
  onLoad (e) {
    const that = this
    that.address = e.address
    that.openId = e.openId
    that.weather = e.weather
    if (that.openId === 'o4SHx0E5lUqhr9oRc_UvHNUKZ-qs') {
      that.name = '小秋秋'
    }
  },
  onUnload () {
    const that = this
    that.address = ''
    that.openId = ''
    that.name = '黄彬'
    that.getSrcFlag = true
    that.desc = ''
    that.imgUrl = '../../static/images/default.png'
  },
  methods: {
    upload () {
      const that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          wx.showLoading({
            title: '上传中'
          })
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          let filePath = res.tempFilePaths[0]
          const name = Math.random() * 1000000
          const cloudPath = 'picture/' + name + filePath.match(/\.[^.]+?$/)[0]
          wx.cloud.uploadFile({
            cloudPath, // 云存储图片名字
            filePath // 临时路径
          }).then(res => {
            console.log(res)
            wx.hideLoading()
            that.imgUrl = res.fileID
          }).catch(e => {
            console.log('[上传图片] 失败：', e)
          })
        }
      })
    },

    save () {
      const that = this
      if (that.desc) {
        that.getSrcFlag = false
        const db = wx.cloud.database()
        const diary = db.collection('diary')
        if (that.imgUrl === '../../static/images/default.png') {
          that.imgUrl = '../../static/images/default.jpg'
        }
        diary.add({
          data: {
            desc: that.desc,
            time: tools.getNowFormatDate(),
            url: that.imgUrl,
            name: that.name,
            weather: that.weather,
            address: that.address,
            like: []
          }
        }).then(res => {
          wx.reLaunch({
            url: '/pages/index/main'
          })
        }).catch(e => {
          console.log(e)
        })
      } else {
        tools.showToast('写点什么吧~')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.loading-container
    position fixed
    width 100%
    height 100%
    top 0
    bottom 0
    left 0
    right 0
    background #fff
    margin auto
    display flex
    justify-content center
    align-items center
.post_mood
    height 100%
    .default
        min-height 500rpx
        width 100%
    .cityName
        height 80rpx
        padding 0 30rpx
        width 690rpx
        display flex
        justify-content space-between
        align-items center
        .city
            flex 1
            display flex
            justify-content flex-start
            align-items center
            .icon
                width 30rpx
                height 30rpx
                margin-right 6rpx
            .address
                font-size 24rpx
                color #666
        .name
            flex 2
            text-align right
            font-size 30rpx
            color #666
    textarea
        min-height 200rpx
        line-height 42rpx
        font-size 30rpx
        color #333
        resize none
        outline none
        padding 40rpx
        width 690rpx
        &::-webkit-input-placeholder
            font-size 30rpx
            color #999
    .save
        position fixed
        bottom 50rpx
        left 50%
        margin-left -50rpx
        height 120rpx
        width 120rpx
        border-radius 50%
        box-shadow 0 0 20rpx rgba(0, 0, 0, 0.1)
        display flex
        flex-direction column
        justify-content center
        align-items center
        z-index 9999
        .save-t
            height 40rpx
            width 40rpx
        .save-b
            font-size 24rpx
            color #bfbfbf
</style>
